<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchDialog"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="mesJCDemandLog"
        uniqueId="mesKtStockInfoJCDemandLog"
      ></ele-page>
    </div>
    <el-dialog title="图片"
               :visible.sync="dialogVisible"
               width="80%"
               :append-to-body="true"
               v-loading="isLoading"
               :close-on-click-modal="false">
      <div
        class="item"
        v-for="(item, key) in imgUrlList"
        :key="key"
      >
        <el-image
          style="width: 100px; height: 100px"
          :src="item"
          :preview-src-list="imgUrlList">
        </el-image>
        <!--        <el-image-->
        <!--          :src="item"-->
        <!--        ></el-image>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { operateList, searchConfig, formDescDialogMixin, rowConfig } from './config'

import { mixinDialog } from '@/views/materials/tmMaterialList/ele-dialog-table/mixin'
import {repairItemCreate, repairItemDeleteById, repairItemPage, repairItemUpdate} from "@/api/repair/item";
import {getDict} from "@/api/common";
import dialogRepairTable from '@/views/materials/tmMaterialList/ele-dialog-table/index'
import {mesJCDemandLog} from "@/api/mesKtStockInfo/mesKtStockInfo";
import {getCurrentWarehouseCode} from "@/api/inbound/mesInTask";
export default {
  name: 'repairItem',
  components: { dialogRepairTable },
  mixins: [ formDescDialogMixin, searchConfig,mixinDialog],
  data() {
    const self = this
    return {
      title: null,
      visible: false,
      isLoading: false,
      loading: false,
      imgUrlList:[],
      formDataDialog: {},
      // formDescDialog, //新增修改框
      operateList,
      dialogVisible:false,
      mesJCDemandLog,
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection',
          fixed: 'left'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        // {
        //   prop: "warehouseCode",
        //   columnKey: "warehouseName",
        //   label: $i18n.t("common.warehouseName"),
        //   fixed: "left",
        //   width: 150,
        //   optionProp: {
        //     value: "modelingCode",
        //     label: "modelingName",
        //   },
        //   option: async (data) => {
        //     const res = await getCurrentWarehouseCode();
        //     let list = res.data.result || []
        //     list.forEach(val => {
        //       val.modelingName = `${val.modelingCode}-${val.modelingName}`
        //     });
        //     return list;
        //   },
        // },
        // {
        //   prop: 'materialCode',
        //   label: '物料编号',
        //   showOverflowTooltip: true
        //},
        {
          prop: 'orderCode',
          label: '单据编号',
          showOverflowTooltip: true
        },
        {
          prop: 'materialName',
          label: '物料名称',
          showOverflowTooltip: true
        },

        {
          prop: 'materialBrand',
          label: '物料品牌',
          showOverflowTooltip: true
        },
        {
          prop: 'materialUnit',
          label: '物料规格',
          showOverflowTooltip: true
        },
        {
          prop: 'materialNum',
          label: '发起数量',
        },
        {
          prop: "itemUnit",
          label: '订货单位',
          render: (h, scope) => {
            let packUnit = scope.row.demandPackUnit
            if(!packUnit || packUnit === '无')
            {
              packUnit = itemUnit
            }
            return <div >{packUnit}</div>
          },
          // optionProp: {
          //   value: "value",
          //   label: "description",
          // },
          // option: async (data) => {
          //   const list = await getDict("material_unit")
          //   return list.data.result;
          // },
          showOverflowTooltip: true,
        },
        {
          prop: 'materialNum',
          label: '发起总量',
          render: (h, scope) => {
            let packNum = scope.row.materialNum
            let packCapacity = scope.row.demandPackCapacity
            if(packCapacity)
            {
              packNum = packNum * packCapacity
            }
            return <div >{packNum}</div>
          }
        },
        {
          prop: "itemUnit",
          label: '物料单位',
        },
        {
          prop: 'vendorName',
          label: '供应商',
          showOverflowTooltip: true
        },
        {
          prop: 'orderState',
          label: '状态',
          render: (h, scope) => {
            let tags = ['', 'info', 'success', 'success', 'success', 'warning', 'success']
            let strs = ['', '询价中', '已确认', '已到货', '已领取', '已取消', '部分到货']
            return <el-tag type={tags[ scope.row.orderState]}>{strs[ scope.row.orderState]}</el-tag>
          }
        },
        {
          prop: 'createByName',
          label: $i18n.t('bomBuyer.creator'),
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'createTime',
          label: $i18n.t('bomBuyer.createTime'),
          minWidth: 160,
          showOverflowTooltip: true
        },
        // {
        //   prop: 'mark',
        //   label: '备注',
        //   showOverflowTooltip: true
        // },
        {
          prop: 'operate',
          label: $i18n.t('common.operation'),
          width: 160,
          fixed: 'right',
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
          }
        }
      ]
    }
  },
  computed: {},
  methods: {
    viewPic(url) {
      if(url)
      {
        this.imgUrlList = url.split(",");
        this.dialogVisible = true;
      }
      else
      {
        this.$message.warning("所选数据没有保存图片")
      }
    },
    // 表格顶部按钮操作事件
    handleOperateEvent({ handleName, name, row }) {
      const fnc = {
        showPhoto: () => {
          this.viewPic(row.materialPhotoUrl)
        },
        // deleteBatch: () => {
        //   this.$confirm('此操作将删除所选数据及关联明细数据, 是否继续?', $i18n.t('common.tip'), {
        //     confirmButtonText: $i18n.t('common.ok'),
        //     cancelButtonText: $i18n.t('common.cancel'),
        //     type: 'warning'
        //   }).then(() => {
        //     const ids = data.rows.map((val) => val.id).join(',')
        //     this.rowDel(ids)
        //   })
        // },
      }
      fnc[data.handleName]()
    },
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        showPhoto: () => {
          this.viewPic(row.materialPhotoUrl)
        },
        // delete: () => {
        //   this.$confirm('此操作将删除所选数据及关联明细数据, 是否继续?', $i18n.t('common.tip'), {
        //     confirmButtonText: $i18n.t('common.ok'),
        //     cancelButtonText: $i18n.t('common.cancel'),
        //     type: 'warning'
        //   }).then(() => {
        //     this.rowDel(row.id)
        //   })
        // }
      }
      fnc[handleName]()
    },
    // 刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    }
  }
}
</script>
